<template>
	<view class="cart-view" v-if="cart.length > 0">
		<my-address></my-address>
		<view class="">
			<!-- 狗儿无车标题 -->
			<view class="title">
				<!-- 左侧图标 -->
				<uni-icons type="shop" size="18"></uni-icons>
				<!-- 右侧文本 -->
				<text class="cart-title-text">购物车</text>
			</view>
		</view>
		<!-- 
			购物车
			图片 名称 价格 数量 选中状态 id
			加入购物车 增 mapMutations
			购物车列表 查 mapState
			修改购物车数量 改 mapMutations
			删除购物车 删 mapMutations
		-->
		<uni-swipe-action >
			<view v-for="(item,index) in cart" :key="index">
				<uni-swipe-action-item :right-options="options" @click="swipeActionHandler(item.goodsId)">
				<!-- **************************** -->
				<view class="newsItem">
					<view class="left">
						<radio @click="radioClick(item.goodsId,item.goodsStates)" :checked="item.goodsStates" color="#c00000"></radio>
						<image :src="item.goodsImg"></image>
					</view>
					<!-- **************************** -->
					<view class="right">
						<view class="tit">
							{{item.goodsName}}
						</view>
						<view class="info">
							<text>${{item.goodsPrice}}</text>
							<uni-number-box @change="numChangeHandle(item.goodsId,$event)" :min="1" :value="item.goodsCount"></uni-number-box>
						</view>
					</view>
				</view>
				<!-- **************************** -->
				</uni-swipe-action-item>
			</view>
		</uni-swipe-action>
		<!-- 使用自定义组件 -->
		<my-settle></my-settle>
		
		
		
	</view>
	<!-- 使用自定义结算组件 -->
	<view class="empty-cart" v-else>
	    <image src="https://img1.baidu.com/it/u=2396415280,2420254561&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=303" class="empty-img"></image>
	    <text class="tip-text">空空如也~</text>
	</view>
	
</template>

<script>
	import badgeMix from '@/mixins/tabber-badge.js'
	import { mapState,mapMutations } from 'vuex'
	export default {
		//混入
		//分发vue组件可复用功能 当项目越来越大 项目中某些组件之间存在相同功能
		//导致其他组件编写相同的代码块 重复定义相同的属性和方法 导致代码冗余
		//使用 mixins混入解决 将相同的功能代码块封装为js对象 
		//将公用的功能一对象的方式传入mixins选项组 
		//这是mixins对象所有的选项都将被混入该组件本身的选中，提高了代码复用性
		mixins:[badgeMix],
		data() {
			return {
				options:[{
					text:"删除",
					style:{
						backgroundColor:"#c00000"
					}
				}]
			}
		},
		methods:{
			...mapMutations('m_cart',['updateGoodsCar','updategoodscart','removeGoodscart']),
			radioClick(id,state){
				//封装对象  传递给vuex
				const goods = {
					id:id,
					state:state
				}
				this.updateGoodsCar(goods)
			},
			numChangeHandle(id,e){
				const goods = { 
					id:id,
					goodsCount:e
				}
				this.updategoodscart(goods)
			},
			swipeActionHandler(id){
				this.removeGoodscart(id)
			}
		},
		computed:{
			...mapState('m_cart',['cart'])
		}
		
	}
</script>

<style lang="scss">
	.empty-cart {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 150px;
		.empty-img {
			width: 100%;
			height: 200px;
		}
		.tip-text {
			font-size: 12px;
			color: gray;
			margin-top: 15px;
		}
	}
	.cart-view{
		padding-bottom:50px;
	}
	page{
		background-color: white;
	}
	.title{
		height:50rpx;
		display: flex;
		padding-left:5rpx;
		align-items: center;
		border-bottom: 1px solid #efefef;
		.cart-title-text{
			font-size: 1rem;
			margin-left: 10px;
			
		}
	}
	.newsItem{
		display:flex;
		padding:10rpx 20rpx;
		border-bottom: 1px solid $shop-color;
		.left{
			display: flex;
			align-items: center;
			radio{
				margin-right:10px;
			}
			image{
				min-width:200rpx;
				max-width: 200rpx;
				height: 150rpx;
			}
		}
		.right{
			margin-left:15px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.tit{
				font-size: 1rem;
			}
			.info{
				margin-bottom: 10px;
				font-size: 0.9rem;
				display: flex;
				flex-direction: row;
				// flex:1;
				justify-content: flex-end;
				color: red;
				justify-items: center;
				text{
					width: 170rpx;
					margin: auto;
				}
				
			}
		}
	}
</style>
